<template>
	<div class="tabelContainer">
		<div class="wrap" style="height: 100%;">
			<noData message="暂无平面图" v-if="!imgUrl"></noData>
			<div class='plan_wrap' v-if="imgUrl">
	           <img :src="imgUrl" alt="" class="bgImg" id="bgImg" :style="{width:width+'px',height:height+'px'}"/>
				<el-tooltip placement="top" effect="light" v-for="(item,index) in dataList" :key="index" v-if="showTD">
				     <img src="/img/bg/m_tadiao.png" alt="" class="tuding" :style="{left:item.posx+'px',top:item.posy+'px'}" v-if="item.type==1"/>
				     <img src="/img/bg/m_xieliao.png" alt="" class="tuding" :style="{left:item.posx+'px',top:item.posy+'px'}" v-if="item.type==2"/>
				     <img src="/img/bg/m_shenjiang.png" alt="" class="tuding" :style="{left:item.posx+'px',top:item.posy+'px'}" v-if="item.type==3"/>
				     <div slot="content">设备名称:{{item.deviceName}}</div>
				</el-tooltip>               
			</div>						
		</div>
	</div>
</template>

<script>
	import { getPlan } from "@/api/dust/plan";
	import  noData  from "@/components/common/noData";
	import $ from "jquery"
	export default {
		components: {
           noData
		},
		data() {
			return {
				showTD:false,
				imgUrl: '',
				height:null,
				width:null,
				dataList:[],
				leftProcess:0,
				topProcess:0
			}
		},
		mounted() {			
			this.init()
		},
		methods: {
			init() {
				getPlan().then(res=>{		
					// 获取比例
					this.dataList=res.data.data.allHighriskDeviceInfoList?res.data.data.allHighriskDeviceInfoList:[]
					this.imgUrl=res.data.data.picUrl
					this.height=res.data.data.height*0.75
					this.width=res.data.data.width*0.75
					let that=this
					
					setTimeout(function(){						
						for(var i=0;i<that.dataList.length;i++){
							that.dataList[i].posx=that.dataList[i].posx*0.75
							that.dataList[i].posy=that.dataList[i].posy*0.75
						}
						that.showTD=true
					},500)					
//					setTimeout(function(){
//						that.leftProcess=$('#bgImg').width()/that.width
//						that.topProcess=$('#bgImg').height()/that.height							
//						for(var i=0;i<that.dataList.length;i++){
//							that.dataList[i].posx=that.dataList[i].posx*that.leftProcess
//							that.dataList[i].posy=that.dataList[i].posy*that.topProcess
//						}
//						that.showTD=true
//					},500)

				})
			}
		}
	}
</script>

<style lang="scss" scoped="">
	.wrap {
		.plan_wrap{width: 100%;position: relative;padding-bottom: 60px;}		
		/*.bgImg{width: 100%}*/
		.tuding{position: absolute;}
	}
</style>